<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Sortable 拖拽排序 | MyUI 4.x</title>
    <meta name="generator" content="VuePress 1.7.1">
    <link rel="icon" href="/my/favicon.ico">
    <script>
      var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?c4e5f73318b5cb0c389e3d9a05f831cc";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })();
    </script>
    <meta name="description" content="MyUI是美亚柏科旗下新德汇出品的Web前端一站式项目工程框架，专注于公检法行业中台系统快速搭建，框架已在多个项目实战检验。">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    
    <link rel="preload" href="/my/assets/css/0.styles.82a18d97.css" as="style"><link rel="preload" href="/my/assets/js/app.fc4964fc.js" as="script"><link rel="preload" href="/my/assets/js/513.edb84f11.js" as="script"><link rel="preload" href="/my/assets/js/1457.fbd6b875.js" as="script"><link rel="preload" href="/my/assets/js/1259.d8ec9dc6.js" as="script"><link rel="preload" href="/my/assets/js/958.935c6658.js" as="script">
    <link rel="stylesheet" href="/my/assets/css/0.styles.82a18d97.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/my/" class="home-link router-link-active"><img src="/my/img/logo.png" alt="MyUI 4.x" class="logo"> <span class="site-name can-hide">MyUI 4.x</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/my/guide/" class="nav-link">
  指南
</a></div><div class="nav-item"><a href="/my/ui/components/" class="nav-link router-link-active">
  组件
</a></div><div class="nav-item"><a href="/my/ui/charts/" class="nav-link">
  图表
</a></div><div class="nav-item"><a href="/my/ui/map/" class="nav-link">
  地图
</a></div><div class="nav-item"><a href="/my/ui/go/" class="nav-link">
  关系图
</a></div><div class="nav-item"><a href="/my/ui/icon/" class="nav-link">
  图标
</a></div><div class="nav-item"><a href="/my/ui/pages/" class="nav-link">
  页面
</a></div><div class="nav-item"><a href="http://newgateway.gitee.io/my-web/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  演示
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="JSDoc" class="dropdown-title"><span class="title">JSDoc</span> <span class="arrow down"></span></button> <button type="button" aria-label="JSDoc" class="mobile-dropdown-title"><span class="title">JSDoc</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/my/api/components.html" class="nav-link">
  基础组件
</a></li><li class="dropdown-item"><!----> <a href="/my/api/utils.html" class="nav-link">
  工具函数
</a></li><li class="dropdown-item"><!----> <a href="/my/api/charts.html" class="nav-link">
  图表组件
</a></li><li class="dropdown-item"><!----> <a href="/my/api/map.html" class="nav-link">
  地图组件
</a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/my/guide/" class="nav-link">
  指南
</a></div><div class="nav-item"><a href="/my/ui/components/" class="nav-link router-link-active">
  组件
</a></div><div class="nav-item"><a href="/my/ui/charts/" class="nav-link">
  图表
</a></div><div class="nav-item"><a href="/my/ui/map/" class="nav-link">
  地图
</a></div><div class="nav-item"><a href="/my/ui/go/" class="nav-link">
  关系图
</a></div><div class="nav-item"><a href="/my/ui/icon/" class="nav-link">
  图标
</a></div><div class="nav-item"><a href="/my/ui/pages/" class="nav-link">
  页面
</a></div><div class="nav-item"><a href="http://newgateway.gitee.io/my-web/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  演示
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="JSDoc" class="dropdown-title"><span class="title">JSDoc</span> <span class="arrow down"></span></button> <button type="button" aria-label="JSDoc" class="mobile-dropdown-title"><span class="title">JSDoc</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/my/api/components.html" class="nav-link">
  基础组件
</a></li><li class="dropdown-item"><!----> <a href="/my/api/utils.html" class="nav-link">
  工具函数
</a></li><li class="dropdown-item"><!----> <a href="/my/api/charts.html" class="nav-link">
  图表组件
</a></li><li class="dropdown-item"><!----> <a href="/my/api/map.html" class="nav-link">
  地图组件
</a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>功能辅助</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/my/ui/components/affix.html" class="sidebar-link">Affix 图钉</a></li><li><a href="/my/ui/components/animate.html" class="sidebar-link">Animate.css 动效</a></li><li><a href="/my/ui/components/capture.html" class="sidebar-link">Capture 抓屏工具</a></li><li><a href="/my/ui/components/clipboard.html" class="sidebar-link">Clipboard 复制剪切</a></li><li><a href="/my/ui/components/drag.html" class="sidebar-link">Drag 拖拽</a></li><li><a href="/my/ui/components/drop.html" class="sidebar-link">Drop 放置</a></li><li><a href="/my/ui/components/lazy.html" class="sidebar-link">Lazy 懒加载</a></li><li><a href="/my/ui/components/print.html" class="sidebar-link">Print 打印</a></li><li><a href="/my/ui/components/promise.html" class="sidebar-link">Promise 异步状态控件</a></li><li><a href="/my/ui/components/resize.html" class="sidebar-link">Resize 缩放</a></li><li><a href="/my/ui/components/sortable.html" aria-current="page" class="active sidebar-link">Sortable 拖拽排序</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/my/ui/components/sortable.html#代码示例" class="sidebar-link">代码示例</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/my/ui/components/sortable.html#基础用法" class="sidebar-link">基础用法</a></li></ul></li><li class="sidebar-sub-header"><a href="/my/ui/components/sortable.html#sortable" class="sidebar-link">Sortable</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/my/ui/components/sortable.html#配置项" class="sidebar-link">配置项</a></li><li class="sidebar-sub-header"><a href="/my/ui/components/sortable.html#事件" class="sidebar-link">事件</a></li><li class="sidebar-sub-header"><a href="/my/ui/components/sortable.html#事件对象" class="sidebar-link">事件对象</a></li><li class="sidebar-sub-header"><a href="/my/ui/components/sortable.html#方法" class="sidebar-link">方法</a></li></ul></li></ul></li><li><a href="/my/ui/components/tree-connect.html" class="sidebar-link">v-tree-connect指令</a></li><li><a href="/my/ui/components/watermark.html" class="sidebar-link">Watermark 水印组件</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>基础元件</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>排版布局</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>容器修饰</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>导航菜单</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>数据录入</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>数据展示</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>动画效果</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="sortable-拖拽排序"><a href="#sortable-拖拽排序" class="header-anchor">#</a> Sortable 拖拽排序</h1> <p>功能强大的JavaScript拖拽组件，文档 <a href="/my/api/components.html?url=%2Fmy%2Fapi%2Fcomponents%2Fmodule-%24ui_components_my-sortable.html" target="_blank" data-v-352a8ad9>MySortable <span data-v-352a8ad9><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="代码示例"><a href="#代码示例" class="header-anchor">#</a> 代码示例</h2> <h3 id="基础用法"><a href="#基础用法" class="header-anchor">#</a> 基础用法</h3> <p>简单列表拖拽</p> <!----><h2 id="sortable"><a href="#sortable" class="header-anchor">#</a> Sortable</h2> <h3 id="配置项"><a href="#配置项" class="header-anchor">#</a> 配置项</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code> <span class="token punctuation">{</span>
    group<span class="token operator">:</span> <span class="token string">&quot;name&quot;</span><span class="token punctuation">,</span>  <span class="token comment">// or { name: &quot;...&quot;, pull: [true, false, 'clone', array], put: [true, false, array] }</span>
    sort<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>  <span class="token comment">// boolean 定义是否列表单元是否可以在列表容器内进行拖拽排序</span>
    delay<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token comment">// number 定义鼠标选中列表单元可以开始拖动的延迟时间；</span>
    touchStartThreshold<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token comment">// px, how many pixels the point should move before cancelling a delayed drag event</span>
    disabled<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// boolean 定义是否此sortable对象是否可用，为true时sortable对象不能拖放排序等功能，为false时为可以进行排序，相当于一个开关；</span>
    store<span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>  <span class="token comment">// @see Store</span>
    animation<span class="token operator">:</span> <span class="token number">150</span><span class="token punctuation">,</span>  <span class="token comment">// ms, number 单位：ms，定义排序动画的时间</span>
    easing<span class="token operator">:</span> <span class="token string">&quot;cubic-bezier(1, 0, 0, 1)&quot;</span><span class="token punctuation">,</span> <span class="token comment">// Easing for animation. Defaults to null. See https://easings.net/ for examples.</span>
    handle<span class="token operator">:</span> <span class="token string">&quot;.my-handle&quot;</span><span class="token punctuation">,</span>  <span class="token comment">// 格式为简单css选择器的字符串，使列表单元中符合选择器的元素成为拖动的手柄，只有按住拖动手柄才能使列表单元进行拖动</span>
    filter<span class="token operator">:</span> <span class="token string">&quot;.ignore-elements&quot;</span><span class="token punctuation">,</span>  <span class="token comment">// 过滤器，不需要进行拖动的元素</span>
    preventOnFilter<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">//  在触发过滤器`filter`的时候调用`event.preventDefault()`</span>
    draggable<span class="token operator">:</span> <span class="token string">&quot;.item&quot;</span><span class="token punctuation">,</span>  <span class="token comment">// 允许拖拽的项目类名</span>
    ghostClass<span class="token operator">:</span> <span class="token string">&quot;sortable-ghost&quot;</span><span class="token punctuation">,</span>  <span class="token comment">// drop placeholder的css类名</span>
    chosenClass<span class="token operator">:</span> <span class="token string">&quot;sortable-chosen&quot;</span><span class="token punctuation">,</span>  <span class="token comment">// 被选中项的css 类名</span>
    dragClass<span class="token operator">:</span> <span class="token string">&quot;sortable-drag&quot;</span><span class="token punctuation">,</span>  <span class="token comment">// 正在被拖拽中的css类名</span>
    dataIdAttr<span class="token operator">:</span> <span class="token string">'data-id'</span><span class="token punctuation">,</span>

    swapThreshold<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment">// Threshold of the swap zone</span>
    invertSwap<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// Will always use inverted swap zone if set to true</span>
    invertedSwapThreshold<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment">// Threshold of the inverted swap zone (will be set to swapThreshold value by default)</span>
    direction<span class="token operator">:</span> <span class="token string">'horizontal'</span><span class="token punctuation">,</span> <span class="token comment">// 拖拽方向 (默认情况下会自动判断方向)</span>

    forceFallback<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>  <span class="token comment">// 忽略 HTML5拖拽行为，强制回调进行</span>

    fallbackClass<span class="token operator">:</span> <span class="token string">&quot;sortable-fallback&quot;</span><span class="token punctuation">,</span>  <span class="token comment">// 当使用forceFallback的时候，被复制的dom的css类名</span>
    fallbackOnBody<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>  <span class="token comment">// 将cloned DOM 元素挂到body元素上。</span>
    fallbackTolerance<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token comment">// Specify in pixels how far the mouse should move before it's considered as a drag.</span>

    scroll<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// or HTMLElement</span>
    <span class="token function-variable function">scrollFn</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">offsetX<span class="token punctuation">,</span> offsetY<span class="token punctuation">,</span> originalEvent<span class="token punctuation">,</span> touchEvt<span class="token punctuation">,</span> hoverTargetEl</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// if you have custom scrollbar scrollFn may be used for autoscrolling</span>
    scrollSensitivity<span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span> <span class="token comment">// px, how near the mouse must be to an edge to start scrolling.</span>
    scrollSpeed<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token comment">// px</span>
    bubbleScroll<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// apply autoscroll to all parent elements, allowing for easier movement</span>

    dragoverBubble<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    removeCloneOnHide<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// Remove the clone element when it is not showing, rather than just hiding it</span>
    emptyInsertThreshold<span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token comment">// px, distance mouse must be from empty sortable to insert drag element into it</span>


    <span class="token function-variable function">setData</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token comment">/** DataTransfer */</span>dataTransfer<span class="token punctuation">,</span> <span class="token comment">/** HTMLElement*/</span>dragEl<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        dataTransfer<span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token string">'Text'</span><span class="token punctuation">,</span> dragEl<span class="token punctuation">.</span>textContent<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// `dataTransfer` object of HTML5 DragEvent</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// 元素被选中</span>
    <span class="token function-variable function">onChoose</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token comment">/**Event*/</span>evt<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        evt<span class="token punctuation">.</span>oldIndex<span class="token punctuation">;</span>  <span class="token comment">// element index within parent</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// 元素未被选中的时候（从选中到未选中）</span>
    <span class="token function-variable function">onUnchoose</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token comment">/**Event*/</span>evt<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">// same properties as onEnd</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// 开始拖拽的时候</span>
    <span class="token function-variable function">onStart</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token comment">/**Event*/</span>evt<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        evt<span class="token punctuation">.</span>oldIndex<span class="token punctuation">;</span>  <span class="token comment">// element index within parent</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// 结束拖拽</span>
    <span class="token function-variable function">onEnd</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token comment">/**Event*/</span>evt<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">var</span> itemEl <span class="token operator">=</span> evt<span class="token punctuation">.</span>item<span class="token punctuation">;</span>  <span class="token comment">// dragged HTMLElement</span>
        evt<span class="token punctuation">.</span>to<span class="token punctuation">;</span>    <span class="token comment">// target list</span>
        evt<span class="token punctuation">.</span>from<span class="token punctuation">;</span>  <span class="token comment">// previous list</span>
        evt<span class="token punctuation">.</span>oldIndex<span class="token punctuation">;</span>  <span class="token comment">// element's old index within old parent</span>
        evt<span class="token punctuation">.</span>newIndex<span class="token punctuation">;</span>  <span class="token comment">// element's new index within new parent</span>
        evt<span class="token punctuation">.</span>clone <span class="token comment">// the clone element</span>
        evt<span class="token punctuation">.</span>pullMode<span class="token punctuation">;</span>  <span class="token comment">// when item is in another sortable: `&quot;clone&quot;` if cloning, `true` if moving</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// 元素从一个列表拖拽到另一个列表</span>
    <span class="token function-variable function">onAdd</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token comment">/**Event*/</span>evt<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">// same properties as onEnd</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// 列表内元素顺序更新的时候触发</span>
    <span class="token function-variable function">onUpdate</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token comment">/**Event*/</span>evt<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">// same properties as onEnd</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// 列表的任何更改都会触发</span>
    <span class="token function-variable function">onSort</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token comment">/**Event*/</span>evt<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">// same properties as onEnd</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// 元素从列表中移除进入另一个列表</span>
    <span class="token function-variable function">onRemove</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token comment">/**Event*/</span>evt<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">// same properties as onEnd</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// 试图拖拽一个filtered的元素</span>
    <span class="token function-variable function">onFilter</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token comment">/**Event*/</span>evt<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">var</span> itemEl <span class="token operator">=</span> evt<span class="token punctuation">.</span>item<span class="token punctuation">;</span>  <span class="token comment">// HTMLElement receiving the `mousedown|tapstart` event.</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// 拖拽移动的时候</span>
    <span class="token function-variable function">onMove</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token comment">/**Event*/</span>evt<span class="token punctuation">,</span> <span class="token comment">/**Event*/</span>originalEvent<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">// Example: https://jsbin.com/nawahef/edit?js,output</span>
        evt<span class="token punctuation">.</span>dragged<span class="token punctuation">;</span> <span class="token comment">// dragged HTMLElement</span>
        evt<span class="token punctuation">.</span>draggedRect<span class="token punctuation">;</span> <span class="token comment">// DOMRect {left, top, right, bottom}</span>
        evt<span class="token punctuation">.</span>related<span class="token punctuation">;</span> <span class="token comment">// HTMLElement on which have guided</span>
        evt<span class="token punctuation">.</span>relatedRect<span class="token punctuation">;</span> <span class="token comment">// DOMRect</span>
        evt<span class="token punctuation">.</span>willInsertAfter<span class="token punctuation">;</span> <span class="token comment">// Boolean that is true if Sortable will insert drag element after target by default</span>
        originalEvent<span class="token punctuation">.</span>clientY<span class="token punctuation">;</span> <span class="token comment">// mouse position</span>
        <span class="token comment">// return false; — for cancel</span>
        <span class="token comment">// return -1; — insert before target</span>
        <span class="token comment">// return 1; — insert after target</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// clone一个元素的时候触发</span>
    <span class="token function-variable function">onClone</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token comment">/**Event*/</span>evt<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">var</span> origEl <span class="token operator">=</span> evt<span class="token punctuation">.</span>item<span class="token punctuation">;</span>
        <span class="token keyword">var</span> cloneEl <span class="token operator">=</span> evt<span class="token punctuation">.</span>clone<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// 拖拽元素改变位置的时候</span>
    <span class="token function-variable function">onChange</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token comment">/**Event*/</span>evt<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        evt<span class="token punctuation">.</span>newIndex <span class="token comment">// most likely why this event is used is to get the dragging element's current index</span>
        <span class="token comment">// same properties as onEnd</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br><span class="line-number">108</span><br><span class="line-number">109</span><br><span class="line-number">110</span><br><span class="line-number">111</span><br><span class="line-number">112</span><br><span class="line-number">113</span><br><span class="line-number">114</span><br><span class="line-number">115</span><br><span class="line-number">116</span><br><span class="line-number">117</span><br><span class="line-number">118</span><br><span class="line-number">119</span><br><span class="line-number">120</span><br><span class="line-number">121</span><br></div></div><ul><li>group：string or object</li></ul> <div class="language-text line-numbers-mode"><pre class="language-text"><code> string：命名，个人建议用元素id就行,用处是为了设置可以拖放容器时使用，在array中的put的设置中再做介绍；
 object：{name,pull,put}
       name：同string的方法，
       pull：pull用来定义从这个列表容器移动出去的设置，true/false/'clone'/function
           true:列表容器内的列表单元可以被移出；
           false：列表容器内的列表单元不可以被移出；
           'clone'：列表单元移出，移动的为该元素的副本；
           function：用来进行pull的函数判断，可以进行复杂逻辑，在函数中return false/true来判断是否移出；
       put：put用来定义往这个列表容器放置列表单元的的设置，true/false/['foo','bar']/function
           true:列表容器可以从其他列表容器内放入列表单元；
           false：与true相反；
           ['foo','bar']：这个可以是一个字符串或者是字符串的数组，代表的是group配置项里定义的name值；
           function：用来进行put的函数判断，可以进行复杂逻辑，在函数中return false/true来判断是否放入；

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><ul><li>sort：boolean 定义是否列表单元是否可以在列表容器内进行拖拽排序；</li> <li>delay：number 定义鼠标选中列表单元可以开始拖动的延迟时间；</li> <li>disabled：boolean 定义是否此sortable对象是否可用，为true时sortable对象不能拖放排序等功能，为false时为可以进行排序，相当于一个开关；</li> <li>animation：number 单位：ms，定义排序动画的时间；</li> <li>handle：selector 格式为简单css选择器的字符串，使列表单元中符合选择器的元素成为拖动的手柄，只有按住拖动手柄才能使列表单元进行拖动；</li> <li>filter：selector 格式为简单css选择器的字符串，定义哪些列表单元不能进行拖放，可设置为多个选择器，中间用“，”分隔；</li> <li>draggable：selector 格式为简单css选择器的字符串，定义哪些列表单元可以进行拖放</li> <li>ghostClass：selector 格式为简单css选择器的字符串，当拖动列表单元时会生成一个副本作为影子单元来模拟被拖动单元排序的情况，此配置项就是来给这个影子单元添加一个class，我们可以通过这种方式来给影子元素进行编辑样式；</li> <li>chosenClass：selector 格式为简单css选择器的字符串，当选中列表单元时会给该单元增加一个class；</li> <li>forceFallback：boolean 如果设置为true时，将不使用原生的html5的拖放，可以修改一些拖放中元素的样式等；</li> <li>fallbackClass：string 当forceFallback设置为true时，拖放过程中鼠标附着单元的样式；</li> <li>scroll：boolean 默认为true，当排序的容器是个可滚动的区域，拖放可以引起区域滚动</li></ul> <h3 id="事件"><a href="#事件" class="header-anchor">#</a> 事件</h3> <ul><li>onChoose：function 列表单元被选中的回调函数</li> <li>onStart：function 列表单元拖动开始的回调函数</li> <li>onEnd：function 列表单元拖放结束后的回调函数</li> <li>onAdd：function 列表单元添加到本列表容器的回调函数</li> <li>onUpdate：function 列表单元在列表容器中的排序发生变化后的回调函数</li> <li>onRemove：function 列表元素移到另一个列表容器的回调函数</li> <li>onFilter：function 试图选中一个被filter过滤的列表单元的回调函数</li> <li>onMove：function 当移动列表单元在一个列表容器中或者多个列表容器中的回调函数</li> <li>onClone：function 当创建一个列表单元副本的时候的回调函数</li></ul> <h3 id="事件对象"><a href="#事件对象" class="header-anchor">#</a> 事件对象</h3> <p>事件对象在各个函数中略有不同，可通过输出对象查看对象的属性，下面简单列举几个：</p> <ul><li>to：HTMLElement--移动到列表容器</li> <li>from：HTMLElement--来源的列表容器</li> <li>item：HTMLElement--被移动的列表单元</li> <li>clone：HTMLElement--副本的列表单元</li> <li>oldIndex：number/undefined--在列表容器中的原序号</li> <li>newIndex：number/undefined--在列表容器中的新序号</li></ul> <h3 id="方法"><a href="#方法" class="header-anchor">#</a> 方法</h3> <ul><li>option(name[,value])
获得或者设置项参数，使用方法类似于jQuery用法，没有第二个参数为获得option中第一个参数所对应的值，有第二个参数时，将重新赋给第一个参数所对应的值；</li> <li>closest
没理解</li> <li>toArray()
序列化可排序的列表单元的data-id（可通过配置项中dataIdAttr修改）放入一个数组，并返回这个数组中</li> <li>sort()
通过自定义列表单元的data-id的数组对列表单元进行排序</li> <li>save()</li> <li>destroy()</li></ul></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/my/ui/components/resize.html" class="prev">
        Resize 缩放
      </a></span> <span class="next"><a href="/my/ui/components/tree-connect.html">
        v-tree-connect指令
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/my/assets/js/app.fc4964fc.js" defer></script><script src="/my/assets/js/513.edb84f11.js" defer></script><script src="/my/assets/js/1457.fbd6b875.js" defer></script><script src="/my/assets/js/1259.d8ec9dc6.js" defer></script><script src="/my/assets/js/958.935c6658.js" defer></script>
  </body>
</html>
